<template>
  <div class="air-conditionner">
    <div class="flex air-conditionner-box">
      <div class="list-box" v-for="(item, index) in lists" :key="index">
        <div class="list-box-1">
          <div class="flex list-box-1-1">
            <div class="flex list-box-1-1-1">
              <img :src="item.imgUrl" class="flex list-box-img" />
            </div>
            <div class="flex text-0">
              <span class="text-0-1">{{item.name}}</span>
              <span>编码：{{item.number}}</span>
              <span>温度：{{item.temperature}}</span>
              <span>模式：{{item.mode}}</span>
              <span>风速：{{item.wspeed}}</span>
            </div>
          </div>
          <div class="flex list-box-1-2">
            <div class="flex list-box-1-2-1">
              <span :class="[item.online?'online-0':'online-1']" class="online-radius" /><span
                :style="{color:item.online?'#40E361':'#F44343'}"
                style="margin-left:5px">{{item.online?"在线":"离线"}}</span>
            </div>
            <div class="flex list-box-1-2-2">
              <el-switch v-model="item.online" active-color="#2A7BFF" inactive-color="#848C98">
              </el-switch>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.index"
        :page-sizes="[12, 24, 50, 100]" :page-size="pages.size" layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import GridManageApi from "@/api/grid-manage";
  import { air } from './data.ts'
  export default {
    data() {
      return {
        lists: [],
        pages:{
          total:0,
          size:12,
          index:1
        }
      };
    },
    mounted() {
      this.lists = air
      this.pages.total=this.lists.length
    },
    methods: {
      toReset() {
        this.searchModel = {};
        this.$refs.elTable.clearSort();
        this.$refs.elTable.clearFilter();
        this.toSearch();
      },
      change1(item, index) {
        console.log(' this.lists[index].isOpen ', this.lists[index].online)
      },
      handleSizeChange(){

      },
      handleCurrentChange(){
        
      }

    },
  };
</script>
<style lang="scss" scoped>
  @function vw($px) {
    @return ($px / 1920) * 100vw;
  }

  @function vh($px) {
    @return ($px /1156) * 100vh;
  }

  .flex {
    display: flex;

  }

  .air-conditionner {
    position: relative;
    width: 100%;
    height: 100%;

  }

  .air-conditionner-box {
    flex-wrap: wrap;
    width: 100%;
    height: 95%;
    overflow-y: scroll;
    align-content: flex-start;
  }

  .air-conditionner-box::-webkit-scrollbar {
    display: none;
  }

  .list-box {
    opacity: 1;
    background: #FFFFFF;
    opacity: 1;
    font-family: Source Han Sans CN;
    font-size: vw(14);
    font-weight: 500;
    letter-spacing: 0em;
    color: #272C33;
    flex-wrap: wrap;
    width: 25%;
    margin: 0;
  }

  .list-box-1 {
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #DAE1E8;
    box-shadow: 2px 0 10px 2px #ebebeb;
    margin-left: vw(8);
    margin-right: vw(8);
    margin-top: vh(8);
    margin-bottom: vh(8);
  }

  .list-box-1-1 {
    padding-left: vw(16);
    padding-right: vw(16);
    padding-top: vh(10);
    padding-bottom: vh(16);
    border-bottom: 1px solid #DAE1E8;
  }

  .list-box-1-1-1 {
    margin-top: vh(10);
  }

  .list-box-img {
    width: vw(91);
    height: vw(91);
  }

  .text-0 {
    flex-direction: column;
    padding-left: vw(22);
    width: vw(185);
    padding-top: vh(10);
  }

  .text-0-1 {
    font-size: vw(18);
    font-weight: 500;
  }

  .text-0>>>span {
    margin-top: vh(8);
    line-height: 28px;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: normal;
    letter-spacing: 0em;
  }

  .list-box-1-2 {
    justify-content: space-between;
    padding-top: vh(16);
    padding-left: vw(16);
    padding-right: vw(17);
    padding-bottom: vh(13);
  }

  .list-box-1-2-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: vw(30);
  }

  .online-radius {
    width: vw(10);
    height: vw(10);
    border-radius: 50%;
  }

  .online-0 {
    background: #40E361;
  }

  .online-1 {
    background: #F44343;
  }

  .switch-0 {
    width: vw(76);
    height: vh(30);
  }

  .list-box-1-2-2 {
    align-items: center;
  }

  .pagination {
    position: absolute;
    right: 0;
    width: 100%;
    text-align: right;
    height: 5%;
    padding-top: vh(5);
    padding-bottom: vh(5);

  }
</style>